<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ include file="/commons/taglibs.jsp"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="Keywords" content="begincode,BeginCode,初学者,初学者社区,java教程,web教程,demo,项目案例,代码分享"/>
    <meta name="Description" content="${chapter.chapterTitle},begincode www.begincode.net  初学者社区，志在让更多软件开发初学者能够掌握一门开发技术  "/>
    <%@ include file="/commons/meta.jsp"%>
    <title>${course.courseName},${chapter.chapterTitle},初学者论坛,BeginCode</title>
    <!-- Bootstrap -->
    <link href="${ctx}/css/bootstrap.css" rel="stylesheet">
    <script src="${ctx}/js/jquery.min.js"></script>


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body  >
<jsp:include page="/page/core/top.jsp" />
<div class="jumbotron">
    <div class="container">
        <h1>${course.courseName}</h1>
        <p>${course.introduction}</p>
    </div>
</div>
<div class="container .col-xs-" >
    <div class="row" >
        <div class="col-md-9" >
            <div class="panel panel-primary" style="margin-top:0;" >
                <div class="panel-body">
                    <h3 >
                        <span class="icon " style="background:#fd9c47;">荐</span>
                         <span id="chapterTitle" >${chapter.chapterTitle}</span>
                    </h3>
                    <hr style="border:none;border-top:2px solid blue; height:0;" />
                    <div id="chapterContent">
                        ${chapter.chapterContent}
                    </div>

                </div>


            </div>
        </div>
        <div class="col-md-3">
            <div class="list-group">
                <a href="#" class="list-group-item active"> 章节目录</a>
                <c:forEach items="${wordChapters}" var="chapter" varStatus="varSt">
                    <a href="#" onclick="loadChapter(${chapter.wordChapterId})" class="list-group-item">${chapter.shortName}</a>
                </c:forEach>
            </div>

        </div>
    </div>


</div>
<hr>
<!-- foot -->
<jsp:include page="/page/core/foot.jsp" />

<script src="${ctx}/js/bootstrap.min.js"></script>
<script src="${ctx}/js/validate/jquery.metadata.js"></script>
<script src="${ctx}/js/course/chapter.js"></script>
<script type="text/javascript">
    $(document).ready(function(e) {
    });
</script>
</body>
</html>